<template>
  <div class="top-box">
    <div class="above-box">
      <a-tabs v-model:activeKey="activeKey"  >
        <a-tab-pane key="1" tab="项目总览">
          <div class="search-box box-shadow">
            <a-form
                layout="inline">
              <a-form-item label="统计范围">
                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">
                  <a-select-option :value="null" key="0">全部</a-select-option>
                  <a-select-option
                      v-for="section in sections"
                      :key="section.sectionId" :value="section.sectionId">
                    {{ section.sectionName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button @click="getAll " type="primary">查询</a-button>
              </a-form-item>
            </a-form>
            <div class="explain-box">
              <a-tooltip placement="left">
                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>
                <QuestionCircleOutlined/>
              </a-tooltip>
            </div>
          </div>
          <div class="above-content">
            <div class="above-top ">
              <div class="above-top-left box-shadow ">
                <div class="small">
                  <span style="margin-left: 10px"> 今日施工/在场（台）</span>
                  <span style="width: 58px;height: 50px;font-size: 25px;font-weight: 600;color: #1677FF; margin-left: 40px">
<!--                {{ tampnum + compnum +pavenum +cfgnum + rotarynum + sprinklenum + diggernum-->
<!--                  + bulldozernum + tracknum + cranenum + asiewnum + loadernum + drillnum + gradernum }}-->
                    {{ tampnum + compnum + pavenum + cfgnum + rotarynum + sprinklenum + diggernum + bulldozernum + tracknum + loadernum + gradernum + cementnum + carnum }}/
                    {{ tampPresent + compPresent + pavePresent + cfgPresent + rotaryPresent + sprinklePresent
                  + diggerPresent + bulldozerPresent + trackPresent + loaderPresent + graderPresent + cementPresent + carPresent }}
                  </span>
                  <span style="font-weight: 400;color: #666666;font-size:14px;font-family: PingFangSC-Regular; float: right ;">
                  更新时间:{{ refreshTime }}</span>
                </div>
                <div class="small-bottom">
                  <a-row style="margin-left: 10px">
                    <a-col :span="2"><a-image :width="44" :height="44" :src="tamp" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">强夯机<span>&nbsp{{ tampnum }}/{{ tampPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="comp" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">碾压机<span>&nbsp{{ compnum }}/{{ compPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="pave" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">摊铺机<span>&nbsp{{ pavenum }}/{{ pavePresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="cfgscene" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">CFG <span>&nbsp{{ cfgnum }}/{{ cfgPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="rotary" :preview="false"/></a-col>
                    <a-col :span="2">
                      <div class="small-col">旋挖钻 <span>&nbsp{{ rotarynum }}/{{ rotaryPresent }}</span></div>
                    </a-col>
                  </a-row>
                  <a-row style="margin-left: 10px;margin-top: 10px">
                    <a-col :span="2"><a-image :width="44" :height="44" :src="sprinkle" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">洒水车<span>&nbsp{{ sprinklenum }}/{{ sprinklePresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="digger" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">挖掘机<span>&nbsp{{ diggernum }}/{{ diggerPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="bulldozer" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">推土机<span>&nbsp{{ bulldozernum }}/{{ bulldozerPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="vehicle" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">运输车 <span>&nbsp{{ tracknum }}/{{ trackPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="loader" :preview="false"/></a-col>
                    <a-col :span="2">
                      <div class="small-col">装载机<span>&nbsp{{ loadernum }}/{{ loaderPresent }}</span></div>
                    </a-col>
<!--                    <a-col :span="2"><a-image :width="44" :height="44" :src="crane" :preview="false"/></a-col>-->
<!--                    <a-col :span="2">-->
<!--                      <div class="small-col">汽车吊 <span>&nbsp{{ cranenum }}</span></div>-->
<!--                    </a-col>-->
                  </a-row>
                  <a-row style="margin-left: 10px;margin-top: 10px">
<!--                    <a-col :span="2"><a-image :width="44" :height="44" :src="asiew" :preview="false"/></a-col>-->
<!--                    <a-col :span="3">-->
<!--                      <div class="small-col">破碎锤<span>&nbsp{{ asiewnum }}</span></div>-->
<!--                    </a-col>-->
<!--                    <a-col :span="2"><a-image :width="44" :height="44" :src="loader" :preview="false"/></a-col>-->
<!--                    <a-col :span="3">-->
<!--                      <div class="small-col">装载机<span>&nbsp{{ loadernum }}</span></div>-->
<!--                    </a-col>-->
<!--                    <a-col :span="2"><a-image :width="44" :height="44" :src="drill" :preview="false"/></a-col>-->
<!--                    <a-col :span="3">-->
<!--                      <div class="small-col">汽车钻<span>&nbsp{{ drillnum }}</span></div>-->
<!--                    </a-col>-->
                    <a-col :span="2"><a-image :width="44" :height="44" :src="grader" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">平地机<span>&nbsp{{ gradernum }}/{{ graderPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="cement" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">搅拌机<span>&nbsp{{ cementnum }}/{{ cementPresent }}</span></div>
                    </a-col>
                    <a-col :span="2"><a-image :width="44" :height="44" :src="car" :preview="false"/></a-col>
                    <a-col :span="3">
                      <div class="small-col">普通车<span>&nbsp{{ carnum }}/{{ carPresent }}</span></div>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div class="above-top-right box-shadow">
                <vue-echarts :option="ratioOption" style="width:760px;height:200px " ref="chart"/>
              </div>
            </div>
            <div class="above-middle">
              <div class="above-middle-left box-shadow">
                <span>机械统计</span>
                <a-tabs v-model:activeKey="Key1" type="card">
                  <a-tab-pane key="6" tab="按日统计">
                    <vue-echarts :option="allDateOption" style="width: 800px;height: 350px" ref="chart"/>
                  </a-tab-pane>

                  <a-tab-pane key="7" tab="按月统计">
                    <vue-echarts :option="allMonthOption" style="width: 800px;height: 350px" ref="chart"/>
                  </a-tab-pane>

                  <template #tabBarExtraContent>
                    <span>统计周期：</span>
                    <a-range-picker
                        v-show="Key1==6"
                        v-model:value="dailytime"
                        :ranges="ranges"/>
                    <a-range-picker
                        v-show="Key1==7"
                        v-model:value="monthtime"
                        :mode="mode2"
                        @panelChange="handlePanelChange"
                        @change="handleChange"
                        format="YYYY-MM"/>
                    <a-button @click="getDevice" style="margin-left: 20px" type="primary">查询</a-button>
                  </template>
                </a-tabs>
              </div>
              <div class="above-middle-right box-shadow" style="position:relative">
                <span>环境监控</span>
                <span style="width: 200px;font-weight: 400;color:#666666;font-family: PingFangSC-Regular;
                 font-size:14px;position:absolute;top:20px;left:400px ;">
              更新时间:{{ weatherList.dateTime }} </span>
                <div class="above-right-box">
                  <div class="above-right-table">

                    <a-row style="height: 80px">
                      <a-col :span="15" style=" color: #1677FF;font-size: 33px; text-align:right;font-weight: 500;">
                        {{ weatherList.temp }}℃
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="5">
                        <a-image :width="20" :height="20" :src="feng" :preview="false"/>
                      </a-col>
                      <a-col :span="8">{{ weatherList.wind }}</a-col>
                      <a-col :span="15"></a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="5">
                        <a-image :width="20" :height="20" :src="shidu" :preview="false"/>
                      </a-col>
                      <a-col :span="9">湿度</a-col>
                      <a-col :span="8">{{ weatherList.humidity }}%</a-col>
                    </a-row>
                    <!--              <a-row>-->
                    <!--                <a-col :span="5"><a-image :width="20" :height="20" :src="guangzhao" :preview="false"/></a-col>-->
                    <!--                <a-col :span="7">光照</a-col>-->
                    <!--                <a-col :span="8">12mm</a-col>-->
                    <!--              </a-row>-->
                    <a-row>
                      <a-col :span="5">
                        <a-image :width="20" :height="20" :src="PM25" :preview="false"/>
                      </a-col>
                      <a-col :span="9">PM2.5</a-col>
                      <a-col :span="8">{{ weatherList.pm25 }}ug/m³</a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="5">
                        <a-image :width="20" :height="20" :src="PM10" :preview="false"/>
                      </a-col>
                      <a-col :span="9">PM10</a-col>
                      <a-col :span="8">{{ weatherList.pm10 }}ug/m³</a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="5">
                        <a-image :width="20" :height="20" :src="zaosheng" :preview="false"/>
                      </a-col>
                      <a-col :span="9">噪声</a-col>
                      <a-col :span="8">{{ weatherList.noise }}dB</a-col>
                    </a-row>

                  </div>
                  <div class="above-right-calendar">
                    <a-tabs v-model:activeKey="activeKey">
                      <!--                <a-tab-pane key="1" tab="降雨" :style="{  border:' 1px solid rgba(221, 221, 221, 0.22)', borderRadius: '4px' }" >-->
                      <!--                  <a-calendar v-model:value="value1" :fullscreen="false" @panelChange="onPanelChange"
                                              :style="{border: '1px solid rgba(221, 221, 221, 0.22)'} "/>-->
                      <!--                  <div class="rainmoncon" >-->
                      <!--                    <span >本月降雨--天，降雨量--mm </span>-->
                      <!--                  </div>-->
                      <!--                </a-tab-pane>-->
                      <a-tab-pane key="1" tab="扬尘"
                                  :style="{  border:' 1px solid rgba(221, 221, 221, 0.22)', borderRadius: '4px' }">
                        <div class="calendarBox">
                          <Calendar :attributes='attrs' @transition-start="dateTime" is-expanded ref="calendar"
                                    :style="{border: '1px solid rgba(221, 221, 221, 0.22)'} ">
                          </Calendar>

                        </div>
                        <div class="rainmoncon">
                          <span>本月扬尘{{ dustDays }}天 </span>
                        </div>
                      </a-tab-pane>

                    </a-tabs>
                  </div>
                </div>
              </div>
            </div>
            <div class="above-down">
              <div class="above-down-left box-shadow">
                <span>单元总览</span>
                <vue-echarts :option="cellOption" style="width: 600px;height:400px; margin-top: 30px " ref="chart"/>
              </div>
              <div class="above-down-right box-shadow">
                <span>单元统计</span>
                <a-tabs v-model:activeKey="Key2" type="card">
                  <a-tab-pane key="8" tab="按日统计">
                    <vue-echarts :option="cellAnalOption" style="width: 700px;height: 400px" ref="chart"/>
                  </a-tab-pane>

                  <a-tab-pane key="9" tab="按月统计">
                    <vue-echarts :option="cellMonthOption" style="width: 700px;height: 400px" ref="chart"/>
                  </a-tab-pane>

                  <template #tabBarExtraContent>
                    <span>统计周期： </span>
                    <a-range-picker
                        v-show="Key2==8"
                        v-model:value="dailytime"
                        :ranges="ranges"
                    />
                    <a-range-picker
                        v-show="Key2==9"
                        v-model:value="monthtime"
                        :mode="mode2"
                        @panelChange="handlePanelChange"
                        @change="handleChange"
                        format="YYYY-MM"
                    />
                    <a-button @click="getCell" style="margin-left: 20px" type="primary">查询</a-button>
                  </template>
                </a-tabs>

              </div>
            </div>
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="强夯统计">
          <div class="search-box box-shadow">
            <a-form
                layout="inline">
              <a-form-item label="统计范围">
                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">
                  <a-select-option :value="null" key="0">全部</a-select-option>
                  <a-select-option
                      v-for="section in sections"
                      :key="section.sectionId" :value="section.sectionId">
                    {{ section.sectionName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button @click="getTamp " type="primary">查询</a-button>
              </a-form-item>
            </a-form>
            <div class="explain-box">
              <a-tooltip placement="left">
                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>
                <QuestionCircleOutlined/>
              </a-tooltip>
            </div>
          </div>
          <div class="above-content"> -->
            <!--    强夯工艺统计-->
            <!-- <div class="tamp-box">
              <div class="tamp-above ">
                <div class=" tamp-above-left box-shadow">
                  <vue-echarts :option="tampOption" style="width: 600px" ref="chart"/>
                </div>
                <div class=" tamp-above-right box-shadow">
                  <span>机械统计</span>
                  <a-tabs v-model:activeKey="Key3" type="card">
                    <a-tab-pane key="10" tab="按日统计">
                      <vue-echarts :option="tampSceneOption" style="width: 750px;height:250px " ref="chart"/>
                    </a-tab-pane>

                    <a-tab-pane key="11" tab="按月统计">
                      <vue-echarts :option="tampSceneMonthOption" style="width: 750px;height:250px " ref="chart"/>
                    </a-tab-pane>

                    <template #tabBarExtraContent>
                      <span>统计周期： </span>
                      <a-range-picker
                          v-show="Key3==10"
                          v-model:value="dailytime"
                          :ranges="ranges"
                      />
                      <a-range-picker
                          v-show="Key3==11"
                          v-model:value="monthtime"
                          :mode="mode2"
                          @panelChange="handlePanelChange"
                          @change="handleChange"
                          format="YYYY-MM"
                      />
                      <a-button @click="getTampScene" style="margin-left: 20px" type="primary">查询</a-button>
                    </template>
                  </a-tabs>


                </div>
              </div>
              <div class="tamp-below  box-shadow">
                <span>施工统计</span>
                <a-tabs v-model:activeKey="Key4" type="card">
                  <a-tab-pane key="12" tab="按日统计">
                    <vue-echarts :option="tampBuildOption" style="width: 1500px;height: 560px" ref="chart"/>
                  </a-tab-pane>

                  <a-tab-pane key="13" tab="按月统计">
                    <vue-echarts :option="tampBuildMonthOption" style="width: 1500px;height: 560px" ref="chart"/>
                  </a-tab-pane>

                  <template #tabBarExtraContent>
                    <span>统计周期： </span>
                    <a-range-picker
                        v-show="Key4==12"
                        v-model:value="dailytime"
                        :ranges="ranges"
                    />
                    <a-range-picker
                        v-show="Key4==13"
                        v-model:value="monthtime"
                        :mode="mode2"
                        @panelChange="handlePanelChange"
                        @change="handleChange"
                        format="YYYY-MM"
                    />
                    <a-button @click="getTampBulid" style="margin-left: 20px" type="primary">查询</a-button>
                  </template>
                </a-tabs>

              </div>
            </div>
          </div>
        </a-tab-pane> -->
        <!-- <a-tab-pane key="3" tab="碾压统计">
          <div class="search-box box-shadow">
            <a-form
                layout="inline">
              <a-form-item label="统计范围">
                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">
                  <a-select-option :value="null" key="0">全部</a-select-option>
                  <a-select-option
                      v-for="section in sections"
                      :key="section.sectionId" :value="section.sectionId">
                    {{ section.sectionName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button @click="getComp " type="primary">查询</a-button>
              </a-form-item>
            </a-form>
            <div class="explain-box">
              <a-tooltip placement="left">
                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>
                <QuestionCircleOutlined/>
              </a-tooltip>
            </div>
          </div>
          <div class="above-content"> -->
            <!--   碾压工艺统计   -->
            <!-- <div class="compaction-box">
              <div class="compaction-above ">
                <div class=" compaction-above-left box-shadow">
                  <vue-echarts :option="compOption" style="width: 600px" ref="chart"/>
                </div>
                <div class=" compaction-above-right box-shadow">
                  <span>机械统计</span>
                  <a-tabs v-model:activeKey="Key5" type="card">
                    <a-tab-pane key="14" tab="按日统计">
                      <vue-echarts :option="compSceneOption" style="width: 750px;height:250px " ref="chart"/>
                    </a-tab-pane>

                    <a-tab-pane key="15" tab="按月统计">
                      <vue-echarts :option="compSceneMonthOption" style="width: 750px;height:250px " ref="chart"/>
                    </a-tab-pane>

                    <template #tabBarExtraContent>
                      <span>统计周期： </span>
                      <a-range-picker
                          v-show="Key5==14"
                          v-model:value="dailytime"
                          :ranges="ranges"
                      />
                      <a-range-picker
                          v-show="Key5==15"
                          v-model:value="monthtime"
                          :mode="mode2"
                          @panelChange="handlePanelChange"
                          @change="handleChange"
                          format="YYYY-MM"
                      />
                      <a-button @click="getCompScene" style="margin-left: 20px" type="primary">查询</a-button>
                    </template>
                  </a-tabs>

                </div>
              </div>
              <div class="compaction-below  box-shadow">
                <span>碾压里程统计</span>
                <a-tabs v-model:activeKey="Key6" type="card">
                  <a-tab-pane key="16" tab="按日统计">
                    <vue-echarts :option="compDistanceOption" style="width: 1500px;height: 700px" ref="chart"/>
                  </a-tab-pane>

                  <a-tab-pane key="17" tab="按月统计">
                    <vue-echarts :option="compDistanceMonthOption" style="width: 1500px;height:700px " ref="chart"/>
                  </a-tab-pane>

                  <template #tabBarExtraContent>
                    <span>统计周期： </span>
                    <a-range-picker
                        v-show="Key6==16"
                        v-model:value="dailytime"
                        :ranges="ranges"
                    />
                    <a-range-picker
                        v-show="Key6==17"
                        v-model:value="monthtime"
                        :mode="mode2"
                        @panelChange="handlePanelChange"
                        @change="handleChange"
                        format="YYYY-MM"
                    />
                    <a-button @click="getCompDistance" style="margin-left: 20px" type="primary">查询</a-button>
                  </template>
                </a-tabs>

              </div>
            </div>

          </div>
        </a-tab-pane> -->
<!--        <a-tab-pane key="4" tab="摊铺统计">-->
<!--          <div class="search-box box-shadow">-->
<!--            <a-form-->
<!--                layout="inline">-->
<!--              <a-form-item label="统计范围">-->
<!--                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">-->
<!--                  <a-select-option :value="null" key="0">全部</a-select-option>-->
<!--                  <a-select-option-->
<!--                      v-for="section in sections"-->
<!--                      :key="section.sectionId" :value="section.sectionId">-->
<!--                    {{ section.sectionName }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button @click="getPave " type="primary">查询</a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--            <div class="explain-box">-->
<!--              <a-tooltip placement="left">-->
<!--                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>-->
<!--                <QuestionCircleOutlined/>-->
<!--              </a-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="above-content">-->
<!--            <div class="paver-box ">-->
<!--              <div class="paver-box-left box-shadow">-->
<!--                <span>施工概况</span>-->
<!--                <vue-echarts :option="paveOption" style="width: 600px;height: 400px; margin: 50px 50px" ref="chart"/>-->
<!--              </div>-->
<!--              <div class="paver-box-right box-shadow">-->
<!--                <span>摊铺面积统计</span>-->
<!--                <a-tabs v-model:activeKey="Key7" type="card">-->
<!--                  <a-tab-pane key="18" tab="按日统计">-->
<!--                    <vue-echarts :option="paveAreaOption" style="width: 710px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="19" tab="按月统计">-->
<!--                    <vue-echarts :option="paveAreaMonthOption" style="width: 710px;height: 470px " ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key7==18"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key7==19"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getPaveArea" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->

<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-tab-pane>-->
<!--        <a-tab-pane key="5" tab="CFG统计">-->
<!--          <div class="search-box box-shadow">-->
<!--            <a-form-->
<!--                layout="inline">-->
<!--              <a-form-item label="统计范围">-->
<!--                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">-->
<!--                  <a-select-option :value="null" key="0">全部</a-select-option>-->
<!--                  <a-select-option-->
<!--                      v-for="section in sections"-->
<!--                      :key="section.sectionId" :value="section.sectionId">-->
<!--                    {{ section.sectionName }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button @click="getCfg " type="primary">查询</a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--            <div class="explain-box">-->
<!--              <a-tooltip placement="left">-->
<!--                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>-->
<!--                <QuestionCircleOutlined/>-->
<!--              </a-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="above-content">-->
<!--            <div class="paver-box">-->
<!--              <div class="paver-box-left box-shadow">-->
<!--                <span>深度统计</span>-->
<!--                <a-tabs v-model:activeKey="Key8" type="card">-->
<!--                  <a-tab-pane key="20" tab="按日统计">-->
<!--                    <vue-echarts :option="cfgDepthOption" style="width: 730px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="21" tab="按月统计">-->
<!--                    <vue-echarts :option="cfgDepthMonthOption" style="width: 730px;height:470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key8==20"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key8==21"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getCfgDepth" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->

<!--              </div>-->
<!--              <div class="paver-box-right box-shadow">-->
<!--                <span>根数统计</span>-->
<!--                <a-tabs v-model:activeKey="Key9" type="card">-->
<!--                  <a-tab-pane key="22" tab="按日统计">-->
<!--                    <vue-echarts :option="cfgCountOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="23" tab="按月统计">-->
<!--                    <vue-echarts :option="cfgCountMonthOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key9==22"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key9==23"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getCfgCount" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->

<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-tab-pane>-->
<!--        <a-tab-pane key="6" tab="旋挖统计">-->
<!--          <div class="search-box box-shadow">-->
<!--            <a-form-->
<!--                layout="inline">-->
<!--              <a-form-item label="统计范围">-->
<!--                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">-->
<!--                  <a-select-option :value="null" key="0">全部</a-select-option>-->
<!--                  <a-select-option-->
<!--                      v-for="section in sections"-->
<!--                      :key="section.sectionId" :value="section.sectionId">-->
<!--                    {{ section.sectionName }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button @click="getRotary " type="primary">查询</a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--            <div class="explain-box">-->
<!--              <a-tooltip placement="left">-->
<!--                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>-->
<!--                <QuestionCircleOutlined/>-->
<!--              </a-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="above-content">-->
<!--            <div class="paver-box">-->
<!--              <div class="paver-box-left box-shadow">-->
<!--                <span>深度统计</span>-->
<!--                <a-tabs v-model:activeKey="Key10" type="card">-->
<!--                  <a-tab-pane key="24" tab="按日统计">-->
<!--                    <vue-echarts :option="RotaryDepthOption" style="width: 730px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="25" tab="按月统计">-->
<!--                    <vue-echarts :option="RotaryDepthMonthOption" style="width: 730px;height:470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key10==24"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key10==25"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getRotaryDepth" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->

<!--              </div>-->
<!--              <div class="paver-box-right box-shadow">-->
<!--                <span>根数统计</span>-->
<!--                <a-tabs v-model:activeKey="Key11" type="card">-->
<!--                  <a-tab-pane key="26" tab="按日统计">-->
<!--                    <vue-echarts :option="RotaryCountOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="27" tab="按月统计">-->
<!--                    <vue-echarts :option="RotaryCountMonthOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key11==26"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key11==27"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getRotaryCount" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->

<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-tab-pane>-->
<!--        <a-tab-pane key="7" tab="车辆统计">-->
<!--          <div class="search-box box-shadow">-->
<!--            <a-form-->
<!--                layout="inline">-->
<!--              <a-form-item label="统计范围">-->
<!--                <a-select placeholder="全部" v-model:value="AnalyseQueryFormState.sections[0].sectionId">-->
<!--                  <a-select-option :value="null" key="0">全部</a-select-option>-->
<!--                  <a-select-option-->
<!--                      v-for="section in sections"-->
<!--                      :key="section.sectionId" :value="section.sectionId">-->
<!--                    {{ section.sectionName }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button @click="getVehicle " type="primary">查询</a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--            <div class="explain-box">-->
<!--              <a-tooltip placement="left">-->
<!--                <template #title>在场机械：机械在项目现场的机械；<br>进场机械：曾在项目现场服役的机械；<br>在线机械：当天有数据回传的机械；</template>-->
<!--                <QuestionCircleOutlined/>-->
<!--              </a-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="above-content">-->
<!--            <div class="paver-box">-->
<!--              <div class="paver-box-left box-shadow">-->
<!--                <span>施工总里程</span>-->
<!--                <vue-echarts :option="TrackDistanceOption" style="width: 700px;height: 470px; margin-top: 50px" ref="chart"/>-->
<!--              </div>-->
<!--              <div class="paver-box-right box-shadow">-->
<!--                <span>里程统计</span>-->
<!--                <a-tabs v-model:activeKey="Key12" type="card">-->
<!--                  <a-tab-pane key="28" tab="按日统计">-->
<!--                    <vue-echarts :option="VehicleDistanceOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <a-tab-pane key="29" tab="按月统计">-->
<!--                    <vue-echarts :option="VehicleDistanceMonthOption" style="width: 700px;height: 470px" ref="chart"/>-->
<!--                  </a-tab-pane>-->

<!--                  <template #tabBarExtraContent>-->
<!--                    <span>统计周期： </span>-->
<!--                    <a-range-picker-->
<!--                        v-show="Key12==28"-->
<!--                        v-model:value="dailytime"-->
<!--                        :ranges="ranges"-->
<!--                    />-->
<!--                    <a-range-picker-->
<!--                        v-show="Key12==29"-->
<!--                        v-model:value="monthtime"-->
<!--                        :mode="mode2"-->
<!--                        @panelChange="handlePanelChange"-->
<!--                        @change="handleChange"-->
<!--                        format="YYYY-MM"-->
<!--                    />-->
<!--                    <a-button @click="getVehicleDistance" style="margin-left: 20px" type="primary">查询</a-button>-->
<!--                  </template>-->
<!--                </a-tabs>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-tab-pane>-->
      </a-tabs>
    </div>
<!--    <div class="rightText">泰安数字工程出品</div>-->
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, onMounted, reactive, watch,} from "vue";
import {VueEcharts} from 'vue3-echarts';
import moment, {Moment} from 'moment';
import {useStore} from "vuex";
import craftInfo from "@/hooks/analyse/craftInfo";
import comp from "@/assets/image/comp.png"
import tamp from "@/assets/image/tamp.png"
import cfgscene from "@/assets/image/cfg-scene.png"
import pave from "@/assets/image/pave.png"
import rotary from "@/assets/image/rotary.png"
import sprinkle from "@/assets/image/sprinkle.png"
import digger from "@/assets/image/digger.png"
import crane from "@/assets/image/crane.png"
import asiew from "@/assets/image/asiew.png"
import bulldozer from "@/assets/image/bulldozer.png"
import drill from "@/assets/image/drill.png"
import loader from "@/assets/image/loader.png"
import vehicle from "@/assets/image/vehicle.png"
import grader from "@/assets/image/grader.png"
import cement from "@/assets/image/cement.png"
import shidu from "@/assets/image/shidu.png"
import guangzhao from "@/assets/image/guangzhao.png"
import PM25 from "@/assets/image/PM25.png"
import feng from "@/assets/image/wind.png"
import zaosheng from "@/assets/image/niose.png"
import PM10 from "@/assets/image/PM10.png"
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Calendar, } from 'v-calendar';
import car from "@/assets/image/car.png"

export default defineComponent({

  setup(){
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    const activeKey= ref('1');
    const Key1=ref('6')
    const Key2=ref('8')
    const Key3=ref('10')
    const Key4=ref('12')
    const Key5=ref('14')
    const Key6=ref('16')
    const Key7=ref('18')
    const Key8=ref('20')
    const Key9=ref('22')
    const Key10=ref('24')
    const Key11=ref('26')
    const Key12=ref('28')

    const {
      AnalyseQueryFormState,
      allDateOption,allMonthOption, ratioOption,cellOption,cellAnalOption,cellMonthOption,
      tampOption, tampSceneOption,tampSceneMonthOption, tampBuildOption,tampBuildMonthOption,
      compOption, compSceneOption,compSceneMonthOption, compDistanceOption,compDistanceMonthOption,
      paveOption,paveAreaOption,paveAreaMonthOption,
      cfgDepthOption,cfgDepthMonthOption,cfgCountOption,cfgCountMonthOption,
      RotaryDepthOption,RotaryDepthMonthOption, RotaryCountOption,RotaryCountMonthOption,
      TrackDistanceOption, VehicleDistanceOption,VehicleDistanceMonthOption,
      tampnum, compnum, pavenum, cfgnum, rotarynum, cementnum,
      sprinklenum, diggernum, bulldozernum, tracknum, cranenum, asiewnum, loadernum, drillnum, gradernum, carnum,
      tampPresent, compPresent, pavePresent, cfgPresent, rotaryPresent, cementPresent,
      sprinklePresent, diggerPresent, bulldozerPresent, trackPresent, cranePresent,
      asiewPresent, loaderPresent, drillPresent, graderPresent, carPresent,
      refreshTime,
      getStatisticsOfSection,getTampPoint,getCompPresent,getPaverdesign, getVehicleScene,
      getDevice,getCell,getTampScene,getTampBulid,getCompScene,getCompDistance,getPaveArea,
      getCfgDepth,getCfgCount,getRotaryDepth,getRotaryCount,getTrackDistance,getVehicleDistance,
      dailytime,monthtime,mode2,handleChange, handlePanelChange,
      resultList, weatherList,attrs,
      dustDays,dateTime,calendar
    } = craftInfo();

    //总览的标段查询钮
    const getAll =()=>{
      getDevice();
      getVehicleScene();
      getCell();
      getStatisticsOfSection();
      // dateTime();
    }
    //强夯的标段查询钮
    const getTamp=()=>{
      getTampPoint();
      getTampScene();
      getTampBulid();
    }
    //碾压的标段查询钮
    const getComp=()=>{
      getCompPresent();
      getCompScene();
      getCompDistance();
    }
    //摊铺的标段查询钮
    const getPave=()=>{
      getPaverdesign();
      getPaveArea();
    }
    //CFG的标段查询钮
    const getCfg=()=>{
      getCfgDepth();
      getCfgCount();
    }
    //旋挖钻的标段查询钮
    const getRotary=()=>{
      getRotaryDepth();
      getRotaryCount();
    }
    //车辆的标段查询钮
    const getVehicle=()=>{
       getTrackDistance();
       getVehicleDistance();
    }


    onMounted(()=>{
      getAll();
      // getTamp();
      // getComp();
      // getPave();
      // getCfg();
      // getRotary();
      // getVehicle();
    })

    return{
      allDateOption, allMonthOption,
      ratioOption,
      cellOption,
      cellAnalOption, cellMonthOption,

      tampOption,
      tampSceneOption,tampSceneMonthOption,
      tampBuildOption,tampBuildMonthOption,

      compOption,
      compSceneOption,compSceneMonthOption,
      compDistanceOption,compDistanceMonthOption,

      paveOption,
      paveAreaOption,paveAreaMonthOption,

      cfgDepthOption,cfgDepthMonthOption,
      cfgCountOption,cfgCountMonthOption,

      RotaryDepthOption,RotaryDepthMonthOption,
      RotaryCountOption,RotaryCountMonthOption,

      TrackDistanceOption,
      VehicleDistanceOption,VehicleDistanceMonthOption,

      getStatisticsOfSection,getTampPoint,getCompPresent,getPaverdesign,
      getAll, getTamp, getComp, getPave, getCfg, getRotary, getVehicle,
      getVehicleScene,
      getDevice, getCell,getTampScene,getTampBulid,getCompScene,getCompDistance,getPaveArea,
      getCfgDepth,getCfgCount,getRotaryDepth,getRotaryCount,getTrackDistance,getVehicleDistance,
      AnalyseQueryFormState, sections,
      resultList,refreshTime,
      tamp,comp, cfgscene,pave,rotary,sprinkle,digger,bulldozer, vehicle,crane,asiew,loader, drill,grader, cement, car,

      tampnum, compnum, pavenum, cfgnum, rotarynum, cementnum,
      sprinklenum, diggernum, bulldozernum, tracknum, cranenum, asiewnum, loadernum, drillnum, gradernum, carnum,
      tampPresent, compPresent, pavePresent, cfgPresent, rotaryPresent, cementPresent,
      sprinklePresent, diggerPresent, bulldozerPresent, trackPresent, cranePresent, asiewPresent, loaderPresent, drillPresent, graderPresent, carPresent,
      calendar,
      dateTime,

      weatherList,
      shidu, guangzhao, PM25, feng, zaosheng, PM10,
      attrs, dustDays,

      activeKey,
      Key1, Key2, Key3, Key4, Key5, Key6, Key7, Key8, Key9,Key10,Key11,Key12,
      ranges: { 近七日: [moment().startOf("day").subtract(1, "weeks"), moment()],
        '本月': [ moment().startOf('month'),moment()] },
      moment,mode2,
      dailytime, monthtime, handleChange, handlePanelChange
    }
  },
  components:{
    VueEcharts,
    QuestionCircleOutlined,
    Calendar,
  }
})
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .above-box {
    display: flex;
    flex-direction: column;
    width:1600px;
    height:1500px;

    ::v-deep .ant-tabs .ant-tabs-top-content{

    }

    .search-box {
      display: flex;
      height: 85px;
      align-items: center;
      padding: 0 38px;
      margin: 10px;
      box-sizing: border-box;
      flex-shrink: 0;

      ::v-deep label {
        color: #666;
      }

      ::v-deep .ant-form {
        width: 100%;
      }

      ::v-deep .ant-select {
        width: 196px;
      }
      .explain-box{
        width: 30px;
        height: 40px;
        flex-shrink: 0;
        padding: 10px;

      }
    }

    .above-content {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;

      .above-top {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 260px;


        .above-top-left {
          display: flex;
          flex: 1;
          height: 260px;
          width: 50%;
          padding: 15px 10px 10px 20px;
          flex-direction: column;

          .small {
            width: 100%;
            height: 18%;

            > span {
              width: 126px;
              height: 25px;
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
              line-height: 36px;
            }
          }

          .small-bottom {
            width: 100%;
            height: 82%;
            margin-top: 20px;
            ::v-deep .ant-col{
              .small-col{
                display: flex;
                flex-direction: column;
                width:45px ;
                > span{
                  width: 36px;
                  height: 22px;
                  font-size: 20px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #1677FF;
                  line-height: 22px;
                }
              }
            }



          }
        }

        .above-top-right {
          display: flex;
          flex: 1;
          width: 50%;
          margin-left: 20px;
          padding: 10px;
        }
      }
      .above-middle {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        width: 100%;
        height: 450px;

        .above-middle-left {
          display: flex;
          flex: 1;
          width: 58%;
          height: 100%;
          padding: 20px 30px 5px;
          flex-direction: column;
          >span{
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }

        .above-middle-right {
          display: flex;
          flex-direction: column;
          height: 100%;
          width: 40%;
          margin-left: 20px;
          padding: 23px 15px 5px 30px;

          > span {
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }

          .above-right-box {
            height: 350px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;

            .above-right-table {
              flex-direction: column;
              display: flex;
              flex: 1;

              ::v-deep .ant-row {
                line-height: 39px;
                height: 60px;

                .ant-col:first-child {
                  color: #666666;

                }
                .ant-col:last-child {
                  color: #666666;
                  text-align: left;
                }
              }

            }

            .above-right-calendar {
              display: flex;
              flex: 1;
              margin-left: 10px;

              ::v-deep .ant-tabs {
                width: 300px;

                .ant-tabs-nav {
                  width: 300px;
                }

                .ant-tabs-bar {
                  margin: 0;
                }

                .ant-tabs-nav .ant-tabs-tab {
                  width: 100%;
                  text-align: center;
                }
              }

              .rainmoncon {
                height: 35px;

                > span {
                  width: 100%;
                  font-size: 15px;
                  font-family: MicrosoftYaHei;
                  color: #1677FF;
                  line-height: 35px;
                  text-align: center;
                  display: inline-block;
                }
              }
            }
          }
        }

      }
      .above-down{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        width: 100%;
        height: 530px;

        .above-down-left {
          display: flex;
          flex: 1;
          height: 100%;
          width: 50%;
          padding: 15px 10px 10px 20px;
          >span{
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }

        .above-down-right {
          display: flex;
          flex: 1;
          width: 50%;
          margin-left: 20px;
          padding: 20px 30px 5px;
          flex-direction: column;

          >span{
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }
      }

      .tamp-box {
        display: flex;
        flex-direction: column;
        height: 1063px;
        width: 100%;

        .tamp-above {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 365px;
          flex: 1;


          .tamp-above-left {
            display: flex;
            flex: 1;
            width: 42%;
            height: 365px;
            padding: 20px;
          }

          .tamp-above-right {
            margin-left: 20px;
            display: flex;
            width: 57%;
            height: 365px;
            padding: 20px 30px 5px;
            flex-direction: column;
            >span{
              width: 72px;
              height: 25px;
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
              line-height: 25px;
            }

          }
        }

        .tamp-below {
          display: flex;
          margin-top: 20px;
          width: 100%;
          height: 685px;
          padding: 20px 30px 5px;
          flex-direction: column;
          >span{
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }

        }
      }

      .compaction-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;

        .compaction-above {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 364px;

          .compaction-above-left {
            display: flex;
            flex: 1;
            width: 42%;
            padding: 16px 32px 16px 32px;
          }

          .compaction-above-right {
            margin-left: 20px;
            display: flex;
            width: 56%;
            padding: 20px 30px 5px;
            flex-direction: column;
            >span{
              width: 72px;
              height: 25px;
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
              line-height: 25px;
            }
          }
        }

        .compaction-below {
          display: flex;
          margin-top: 20px;
          width: 100%;
          height:830px;
          padding: 20px 30px 40px;
          flex-direction: column;
          >span{
            width: 120px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }

        }
      }

      .paver-box{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 600px;
        .paver-box-left {
          display: flex;
          flex: 1;
          height: 100%;
          width: 50%;
          padding: 20px 30px 5px;
          flex-direction: column;
          >span{
            width: 120px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }

        }
        .paver-box-right {
          display: flex;
          flex: 1;
          width: 48%;
          margin-left: 20px;
          padding: 20px 30px 5px;
          flex-direction: column;

          >span{
            width: 120px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }

        }
      }

    }
    }
  }
.rightText {
  width: 200px;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #919191;
  line-height: 25px;
  margin: auto;
  bottom: 32px;
}
</style>
